<template>
	<view >
		<view class="tab-container bg-ffffff">
		    <view  v-for="(item, index) in buttons" :key="index"  class="tab-item" 
		        :class="{ 'active': currentIndex === index }"
			    @click="handleTabClick(index)"
				 >
		       {{ item.text }}
		    </view>
		</view>	
		<view v-if="currentIndex==0" class="margin-15 overflow-hidden">
			<view class="margin-b-10">
			   <picker @change="bindPickerChange" :range="array">
			      <view class="picker">{{array[index]}}▼
				  </view>
			   </picker>
			</view>
			 <view class="charts-box bg-ffffff padded-b-10 padded-t-15 border-radius-5">
			    <qiun-data-charts 
			      type="line"
			      :opts="opts"
			      :chartData="chartData"
			      :ontouch="true"
				  :canvas2d="true" 
			    />
			  </view>
			  <view class=" margin-b-15 color-838A99">
			  	<view class="text-18 margin-b-15 margin-t-15 color-2C3340">综合统计</view>
			  	 <view class="container bg-ffffff padded-10 border-radius-5 padded-b-15">
					 <view>
						 <view class="form-group">
						     <view class="label">年度总收入:</view>
						 	<view class="value">{{ ndzsr }} (元)</view>
						 </view>
						 <view class="form-group">
						   <view class="label">年度总还款:</view>
						   <view >{{ ndzhk }} (元)</view>
						 </view>
						 <view class="form-group">
						   <view class="label">差额:</view>
						   <view >{{ ce }} (元)</view>
						 </view>
					 </view>
					<view class="text-center text-16 color-2C3340">产品统计</view>
					<view>
						 <view class="form-group">
						   <view class="label">本金总额:</view>
						   <view >{{ bjze }} (元)</view>
						 </view>
						 <view class="form-group">
						   <view class="label">利息总额:</view>
						   <view >{{ lxze }} (元)</view>
						 </view>
					</view>
					
					<view v-for="(item, index) in hk" :key="index">
						<view class="text-16 margin-t-15 color-2C3340">{{ item.cpname }}</view>
						<view>
							 <view class="form-group">
							   <view class="label">年度本金总额:</view>
							   <view >{{ item.ndzbj }} (元)</view>
							 </view>
							 <view class="form-group">
							   <view class="label">利息总额:</view>
							   <view >{{ item.ndzlx }} (元)</view>
							 </view>
						</view>
					</view>
			  	  </view>
			  
			  </view>
		</view>
	    <view v-else class="margin-15">
			
			<view v-if="this.wjyc.rq != ''" >
				<view class="margin-10 text-16">危机点预测</view>
				<view class="charts-box bg-ffffff border-radius-10">
					<qiun-data-charts 
					  type="column"
					  :opts="opts1"
					  :chartData="chartData1"
					  :ontouch="true"
				  	  :canvas2d="true"
					/>
				</view>
			</view>
			<view class="margin-10 text-16">资产结构</view>
			<view class="charts-box bg-ffffff border-radius-5 padded-t-15">
				<qiun-data-charts 
				  type="pie"
				  :opts="opts2"
				  :chartData="chartData2"
				/>
			</view>
			<view v-if="tj.length > 0" >
				<view class="margin-10">根据资产比例，推荐以下抵押类产品!</view>
				<view  class="bg-ffffff padded-15" >
					<view v-for="(item, index) in tj" :key="index" class="form-group-item">
						<view class="form-group">
						   <view class="tag-label">{{ item.cpmc }}</view>
						   <view class="tag-item">
							  <text class="tag">低利率</text>
						   </view>
						</view>
						<view v-if="item.zged > 0" class="form-group">
						   <view class="tag-title">预估额度<text class="yg-quota">￥{{ item.zged }}</text></view>
						   <view class="tag-item">
								<button class="mini-btn" type="primary" size="mini">立即申请</button>
						   </view>
						</view>
						<view class="form-group">
						   <view class="tag-title">最高额度:￥{{ item.zgje }}万</view>
						   <view class="tag-item">
							   年利率:{{ item.zxnhll }}(%)
						   </view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.getServer();
			this.getbd(this.array[0]);
			
			this.getServerData();
			if(this.wjyc.rq != ''){
				this.getServerData1();
			}
			this.getServerData2();
		},
		data() {
			return {
				ndzsr: 0,
				ndzhk: 0,
				ce: 0,
				lxze: 0,
				bjze: 0,
				hk:[],
				rdata: [],
				list:[],
				
				wjyc:[],
				tj:[],
				
				index:0,
				currentIndex: 0, // 默认选中第一个
				buttons: [
					{ text: "收还分析" },
					{ text: "危机点预测" },
				],
				array:[2025,2026,2027],
				chartData: {},
			    opts: {
			    	dataLabel: false,
					dataPointShape: false,
					enableScroll: true, // 开启滚动
					color: ["#4180FE","#C2D7FB","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,5,0,5],
					
					legend: {},
					xAxis: {
						  disableGrid: true,
						  scrollShow: false, // 显示滚动条
						  scrollAlign: "left", // 滚动条对齐方式
						  itemCount: 5, // 默认显示数据点（超出可滑动）
					},
					yAxis: {
					   disableGrid:false,
					   gridType: "dash",
					   dashLength: 2
					},
					extra: {
					  line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					  }
					}
			    },
				chartData1: {},
				opts1: {
						dataLabel: false,//是否显示图表区域内数据点上方的数据文案
						color: ["#0052D9","#BCC4D0","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
						padding: [15,15,0,5],
						enableScroll: true,
						legend: {},
						xAxis: {
						  disableGrid: true,
						  scrollShow: false, // 显示滚动条
						  scrollAlign: "left", // 滚动条对齐方式
						  itemCount: 5, // 默认显示数据点（超出可滑动）
						},
						yAxis: {					  
						  data: [						  
							{
								axisLine:false,
								disabled:true,
								min: 0
							}
						  ]
						},
					extra: {
					  column: {
							linearOpacity:1,
							seriesGap: 5,//每个柱子之间的间距
							type: "group",
							width: 10,
							activeBgColor: "#000000",
					  }
					}
				},
				chartData2: {},
				 opts2: {
					color: ["#91CC75","#FAC858","#EE6666","#5470C6","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [5,5,5,5],
					enableScroll: false,
					extra: {
					  pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 3,
						borderColor: "#FFFFFF"
					  }
					}
				}
			}
		},
		onReady() {

		},
		methods: {
			getServer() {
				this.$request(
					{wxurl: '/index.html#/pages/index/sz_analysis'}
				).then(res => {
					// 验证登入
				})
			},
			getbd(datey){
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/szfx', // 请求地址
				    data: {
				    	datey: datey,
				    },
					success: (res) => {
				        // 请求成功的回调函数
				        console.log('请求成功:', res.data);
						if(res.data.code == 1){
							this.rdata = res.data;
							this.wjyc = res.data.wjyc;
							
							this.ndzsr= res.data.data.ndzsr;
							this.ndzhk= res.data.data.ndzhk;
							this.ce= res.data.data.ce;
							this.lxze= res.data.data.lxze;
							this.bjze= res.data.data.bjze;
							
							this.hk= res.data.hk;
							this.tj= res.data.tj;
						}
				
				    },
				    fail: function(err) {
				        // 请求失败的回调函数
				        console.error('请求失败:', err);
				    }
				});
			},
			handleTabClick(index) {
			      this.currentIndex = index; // 更新当前选中索引
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail)
				this.index = e.detail.value
				const datey = this.array[e.detail.value];
				this.getbd(datey);
				this.getServerData();
			},
			getServerData() {
			      //模拟从服务器获取数据时的延时
			      setTimeout(() => {
			        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let resc = {
			            categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
			            series: [
			              {
			                name: "还",
			                data: [305,80,253,37,504,200,100,100,200,300,200,300]
			              },
			              {
			                name: "收",
			                data: [105,280,353,537,604,200,100,200,400,200,200,100]
			              },
			             
			            ]
			        };
					resc.series[1].data = this.rdata.yue.series1;
					resc.series[0].data = this.rdata.yue.series2;
			        this.chartData = JSON.parse(JSON.stringify(resc));
			      }, 500);
			},
			getServerData1() {
			      //模拟从服务器获取数据时的延时
			  setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ["25-07","25-08","25-09","25-10","26-01","26-02","26-03"],
					series: [
					  {
						name: "资产",
						data: [35,36,31,34,20,30,40]
					  },
					  {
						name: "债务",
						data: [18,27,21,24,10,30,50]
					  }
					]
				  };
				  
				  res.categories = this.wjyc.rq;
				  res.series[0].data = this.wjyc.zc;
				  res.series[1].data = this.wjyc.zw;
				this.chartData1 = JSON.parse(JSON.stringify(res));
			  }, 500);
			},
		    getServerData2() {
		      //模拟从服务器获取数据时的延时
		      setTimeout(() => {
		        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		        let res = {
		            series: [
		              {
		                data: [
							{"name":"房产","value": this.rdata.user.ufwgz},
							{"name":"月收入","value": this.rdata.user.uypjsr},
							{"name":"其他","value": this.rdata.user.uqtzc},
							{"name":"储蓄","value": this.rdata.user.ucxe},
						]
		              }
		            ]
		          };
				  
		        this.chartData2 = JSON.parse(JSON.stringify(res));
		      }, 500);
		    },
		}
	}
</script>

<style>
	.yg-quota{
		font-size: 20px;
		color: #0659BC;
	}
	.tag-label{
		font-size: 15px;
		font-weight: 600;
	}
	.tag{
		color: #21B184;
		background-color:#E8F8F2;
		padding:5px 15px;
		border-radius: 5px;
		margin-right:5px;
	}
	.tag:last-child{
		margin-right: 0;
	}
	.tag-title,.tag-item{
		color:#838A99;
	}
	.form-group-item{
		padding-bottom: 10px;
		border-bottom: 1px solid #F4F4F4;
		margin-bottom: 10px;
	}
	.form-group {
	  display: flex;
	  padding:5px 0;
	  justify-content: space-between;
	}

	.tab-container {
	   display: flex;
	    justify-content: space-between;
	}
	.tab-item {
	  flex: 1;
	  text-align: center;
	  padding: 20rpx;
	  color: #666;
	}
	.tab-item.active {
	  color: #2C8AFF;
	  font-weight: bold;
	  position: relative;
	}
	.tab-item.active::after{
		content: "";
	   position: absolute;
	   bottom: 0;
	   left: 50%;
	   transform: translateX(-50%);
	   width:75px;
	   height: 4rpx;
	   background: #0052D9;
	}
</style>
